<template>
	<view class="w-100 bottom-index animate__fadeIn dh-0-6s min-h-100" :class="noticeType == 0?'':'bac-col-fa'">
		<!-- 加载中蒙版 -->
		<uni-transition mode-class="fade" :duration="500" :show="!dataLoaded" custom-class="vague-bg-9 mask-load">
		</uni-transition>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<view
			:style="{position:'sticky',height:menuObject.height + menuObject.top +8 + 'px',width:'100%',zIndex:'2',top:0}"
			class="w-100 bac-col-00b">
			<view style="position: sticky;z-index: 2;"
				:style="{top:menuObject.top + 'px',height:menuObject.height + 'px',lineHeight:menuObject.height+'px'}">
				<view class="flex-dir-row fs-32 pos-abso flex-x-bet fw-600 centered col-f">
					<view>通知消息</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="flex-dir-row flex-x-spa w-100 ping-30">
			<view class=" text-ali-c" @click="noticeTypeClick(0)">
				<view class="bac-col-68 ping-20 br-30 circle-box"
					:style="{background:noticeType == 0?'#cbfaff':'',boxShadow:noticeType == 0?'0rpx 0rpx 15rpx 0rpx #b1dbde':''}">
					<image class="w-100 h-100"
						src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/qztz.png">
					</image>
				</view>
				<view class="fs-26 fw-600 mt-20">圈子消息</view>
			</view>
			<view class=" text-ali-c" @click="noticeTypeClick(1)">
				<view class="bac-col-68 ping-20 br-30 activity-box pos-rela"
					:style="{background:noticeType == 1?'#dbffd9':'',boxShadow:noticeType == 1?'0rpx 0rpx 15rpx 0rpx #c3e1c1':''}">
					<image class="w-100 h-100"
						src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/hdtz.png">
					</image>
					<!-- 大于9条未读显示... -->
					<view v-if="activityNoticeCount <= 9 && activityNoticeCount > 0" class="num-box">
						{{activityNoticeCount}}
					</view>
					<view v-else-if="activityNoticeCount > 9" class="num-box">
						<view class="iconfont ic-dian"></view>
					</view>
				</view>
				<view class="fs-26 fw-600 mt-20">活动通知</view>
			</view>
			<view class=" text-ali-c" @click="noticeTypeClick(2)">
				<view class="bac-col-68 ping-20 br-30 system-box pos-rela"
					:style="{background:noticeType == 2?'#fff2d2':'',boxShadow:noticeType == 2?'0rpx 0rpx 15rpx 0rpx #e3d7bb':''}">
					<image class="w-100 h-100"
						src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/xttz.png">
					</image>
					<!-- 大于9条未读显示... -->
					<view v-if="systemNoticeCount <= 9 && systemNoticeCount > 0" class="num-box">{{systemNoticeCount}}
					</view>
					<view v-else-if="systemNoticeCount > 9" class="num-box">
						<view class="iconfont ic-dian"></view>
					</view>
				</view>
				<view class="fs-26 fw-600 mt-20">系统通知</view>
			</view>
		</view>
		<!-- 圈子消息 -->
		<view v-if="noticeType === 0" class="animate__fadeIn dh-0-6s">
			<!-- 如果消息列表为空 -->
			<view v-if="noticeList.length === 0" class="message-empty-box">
				<image class="message-empty-image"
					src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/message-empty.png"
					mode="scaleToFill" />
				<view class="fs-28 fw-600">暂无消息</view>
			</view>
			<scroll-view v-else scroll-y class="w-100 ping-30 h-100-vh">
				<view class="flex-dir-row ali-item-sta flex-x-bet mb-50" v-for="item in noticeList" :key="item.id">
					<view class="flex-dir-row ali-item-sta">
						<qmy-gender-border @click="$NavigateTo(`/pages/user/myPage?usid=${item.user_id}`)"
							iconBottom="4rpx"
							:gender="item.user_gender"
							:avatar="item.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
							:avatarWidth="90 + 'rpx'" :avatarHeight="90 + 'rpx'"></qmy-gender-border>
						<view
							@click="item.like_data?'':$NavigateTo(`/pages/detail/articleDetail?id=${item.article_id || item.comment_content.article_id || item.comment_data.article_id || item.comment_content.article_id || item.article_data.id}`)"
							class="ml-20">
							<view class="flex-dir-col flex-x-bet h-90 text-box">
								<view class="fs-30 fw-600">{{item.user_name || '匿名用户'}}</view>
								<view class="fs-26 col-87">
									<text>
										{{
									    (item.article_data && item.type === 0)
									      ? '赞了圈子'
									      : (item.article_data && item.comment_type === 0)
									      ? '评论了圈子'
									      : (item.like_data && item.like_data.comment_type === 0)
									      ? '赞了你的评论'
									      : (item.comment_data)
									      ? '回复了你的评论'
									      : (item.like_data && item.like_data.comment_type === 1)
									      ? '赞了你的回复'
									      : '未知状态'
									  }}
									</text>

									<text class="ml-10">{{ $timeFormat(item.create_date) }}</text>
								</view>
							</view>
							<view class="flex-dir-row mt-10 ali-item-cen" style="align-items: stretch;">
								<view class="flex-shrink-0 line-box"></view>
								<view class="fs-26 col-87 ml-10 mb-5">
									<text>
										{{
									    (item.comment_content) ||
									    (item.article_data && item.article_data.title) ||
									    (item.like_data && item.like_data.comment_content) ||
									    (item.comment_data && item.comment_data.comment_content) ||
									    '未知内容'
									  }}
									</text>
								</view>
							</view>
						</view>
					</view>
					<image mode="aspectFill"
						@click="$NavigateTo(`/pages/detail/articleDetail?id=${item.article_id || item.comment_content.article_id || item.comment_data.article_id || item.comment_content.article_id || item.article_data.id}`)"
						v-if="item.type == 0 || (item.comment_content && item.comment_type == 0) "
						class="br-10 wh-90 flex-shrink-0" :src="item.article_data.thumbnail[0]">
					</image>
				</view>
				<view class="mt-20 w-100 flex-center mb-20 text-ali-c flex-dir-row ali-item-cen">
					<image src="/static/logo.png" class="bot-logo"></image>
					<image src="/static/name.png" class="bot-name" mode="scaleToFill"></image>
				</view>
			</scroll-view>
		</view>
		<view v-else-if="noticeType === 1" class="animate__fadeIn dh-0-6s">
			<!-- 如果消息列表为空 -->
			<view v-if="activityNoticeList.length === 0" class="message-empty-box">
				<image class="message-empty-image"
					src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/message-empty.png"
					mode="scaleToFill" />
				<view class="fs-28 fw-600">暂无消息</view>
			</view>
			<!-- 消息列表 -->
			<view v-else class="ping-30 w-100">
				<!-- <view class="fs-24 col-87">只看他</view>
				<scroll-view scroll-x class="w-100 mt-20">
					<view class="flex-dir-row ali-item-cen w-100">
						<view class="text-ali-c flex-shrink-0" style="width: 23%;"
							v-for="(item,index) in activityMessageList" @click="selectedMessage = index" :key="index">
							<view class="ali-item-cen flex-center h-100-r">
								<view :class="selectedMessage === index ? 'avatar-box-selected bac-col-68' : ''"
									class="br-200 ping-10" style="width: 100rpx;height: 100rpx;">
									<image class="message-uesr-avatar"
										src="https://gd-hbimg.huaban.com/cab77d5cc2560dbff3f37786e016093cbb2f854a30bd7-Ncp3yA_fw1200webp"
										mode="aspectFill" />
								</view>
							</view>
							<view class="fs-24 text-element-1 mt-10"
								:class="selectedMessage === index ? 'fw-600' : 'col-87'">活动助手</view>
						</view>
					</view>
				</scroll-view> -->
				<!-- 活动消息 -->
				<scroll-view scroll-y class="w-100 h-100-vh">
					<view class="bac-col-f br-20 mb-30" v-for="(item,index) in activityNoticeList" :key="index">
						<view @click="$NavigateTo(`/pages/user/myPage?usid=${item.activity_info.user_id}`)"
							class="flex-dir-row ali-item-cen flex-x-bet ping-20">
							<view class="flex-dir-row ali-item-cen">
								<view class="activity-message-avatar pos-rela">
									<qmy-gender-border :gender="item.activity_info.publisher_gender" iconWidth="24rpx" iconHeight="24rpx" iconSize="18rpx" iconLineHeight="24rpx"
										:avatar="item.activity_info.publisher_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
										:avatarWidth="65 + 'rpx'" :avatarHeight="65 + 'rpx'"></qmy-gender-border>
									<view v-if="!item.user_read_status_array.includes(userInfo._id)"
										style="height: 15rpx;width: 15rpx;top: 0;right: 0;"
										class="br-200 bac-col-ff0 pos-abso"></view>
								</view>
								<view class="fs-28 fw-600 ml-10">{{item.activity_info.publisher_nickname}}
								</view>
							</view>
							<view class="fs-24 col-b1">{{$timeFormat(item.notice_time)}}</view>
						</view>
						<view @click="navigateToActivityNoticeDetail(item)" class="pos-rela activity-message-image">
							<image :src="item.activity_info.imgs[0].src" mode="aspectFill"
								class="activity-message-image" />
							<view
								class="col-f fw-600 fs-32 pos-abso ping-20 w-100 activity-message-title text-element-1">
								{{item.activity_info.name}}
							</view>
						</view>
						<view @click="navigateToActivityNoticeDetail(item)" class="fs-30 fw-600 ping-20 text-element-2">
							{{item.notice_title}}
						</view>
					</view>
					<view class="mt-20 w-100 flex-center mb-20 text-ali-c flex-dir-row ali-item-cen">
						<image src="/static/logo.png" class="bot-logo"></image>
						<image src="/static/name.png" class="bot-name" mode="scaleToFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 系统通知 -->
		<view v-else-if="noticeType === 2" class="animate__fadeIn dh-0-6s">
			<!-- 如果消息列表为空 -->
			<view v-if="systemNoticeList.length === 0" class="message-empty-box">
				<image class="message-empty-image"
					src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/message-empty.png"
					mode="scaleToFill" />
				<view class="fs-28 fw-600">暂无消息</view>
			</view>
			<scroll-view v-else scroll-y class="w-100 ping-30 h-100-vh">
				<view class="bac-col-f br-20 ping-20 mb-30" v-for="(item,index) in systemNoticeList" :key="index">
					<view class="flex-dir-row flex-x-bet ali-item-cen">
						<view class="flex-dir-row ali-item-cen">
							<view class="border-f0 ping-10 br-200 pos-rela" style="width: 80rpx;height: 80rpx;">
								<image class="flex-shrink-0 br-200" style="width: 60rpx; height: 60rpx;"
									src="../../../static/logo.png" />
								<view v-if="item.user_read_status == 0"
									style="height: 15rpx;width: 15rpx;top: 0;right: 0;"
									class="br-200 bac-col-ff0 pos-abso"></view>
							</view>
							<view class="fs-32 fw-600 ml-20">{{item.system_notice_type}}</view>
						</view>
						<view class="fs-26 col-87">{{$timeFormat(item.notice_time)}}</view>
					</view>
					<view class="mt-20 bor-top-f3 pt-20">
						<view class="fw-600 fs-32">{{item.notice_title}}</view>
						<view class="fs-28 mt-20">{{item.notice_content}}</view>
					</view>
				</view>
				<view class="mt-20 w-100 flex-center mb-20 text-ali-c flex-dir-row ali-item-cen">
					<image src="/static/logo.png" class="bot-logo"></image>
					<image src="/static/name.png" class="bot-name" mode="scaleToFill"></image>
				</view>
			</scroll-view>
		</view>
		<!-- 活动通知 -->
		<!-- <view :style="{marginTop:menuObject.height + menuObject.top +8 + 'px'}" class="ping-20 pt-20 pb-20">
			<view class="flex-dir-row ali-item-cen bac-col-fa br-20 ping-15">
				<image class="user-avatar" src="../../../static/logo.png"></image>
				<view class="flex-x-bet flex-dir-col message-box">
					<view class="fs-28 fw-600">系统通知</view>
					<view class="fs-24 col-b1 text-element-1">您有10条活动通知，点击查看</view>
				</view>
			</view>
		</view>
		<view class="ping-20 pt-0">
			<view class="flex-dir-row ali-item-cen bac-col-fa br-20 ping-15"
				@click="$NavigateTo('/pages/detail/messageAction')">
				<image class="user-avatar" src="../../../static/logo.png"></image>
				<view class="flex-x-bet flex-dir-col message-box">
					<view class="fs-28 fw-600">活动通知</view>
					<view class="fs-24 col-b1 text-element-1">您有10条系统通知，点击查看</view>
				</view>
			</view>
		</view> -->
		<!-- 如果消息列表为空 -->
		<!-- <view v-if="messageList.length === 0" class="message-empty-box">
			<image class="message-empty-image" src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/message-empty.png" mode="scaleToFill" />
			<view class="fs-28 fw-600 col-b1">暂无消息</view>
		</view>
		<view v-else class="ping-0-35 w-100">
			<view class="flex-dir-row ali-item-cen ping-20-0 w-100" v-for="index in 20">
				<image class="user-avatar border-f0" src="../../../static/logo.png"></image>
				<view class="flex-x-bet flex-dir-col message-box w-100 flex-1">
					<view class="flex-dir-row flex-x-bet ali-item-cen">
						<view class="fs-28 fw-600 text-element-1">用户消息</view>
						<view class="fs-24 col-b1">1天前</view>
					</view>
					<view class="flex-dir-row flex-x-bet ali-item-cen">
						<view class="fs-24 col-b1 text-element-1">您有10条活动通知，点击查看</view> -->
		<!-- </view> -->
		<!-- </view> -->
		<!-- </view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		name: 'pageD',
		props: {
			isVisible: {
				type: Boolean,
				required: false
			},
			refresh: {
				type: Boolean,
				required: false
			}
		},
		computed: {
			userInfo() {
				return store.userInfo //用户信息
			},
		},
		data() {
			return {
				//顶部导航
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				// 通知类型
				noticeType: 0,
				// 通知列表
				noticeList: [],
				// 活动通知列表
				activityNoticeList: [],
				// 系统通知列表
				systemNoticeList: [],
				dataLoaded: false, //数据是否加载完成
				activityNoticeCount: 0, //活动通知未读数量
				systemNoticeCount: 0, //系统通知未读数量
				isClickSystemNotice: false, //判断是否点击过系统通知
			}
		},
		watch: {
			isVisible(val) {
				if (val && !this.dataLoaded) {
					// 获取圈子通知列表
					this.getCircleNoticeList();
					// 获取活动通知列表
					this.getActivityNoticeList();
					// 获取系统通知列表
					this.getSystemNoticeList();
				}
				// 如果已经点击过系统通知，且val为false（页面隐藏），则重新获取系统通知列表
				if (this.isClickSystemNotice && !val) {
					this.getSystemNoticeList();
				}
			},
			refresh(e) {
				if (e) {
					this.dataLoaded = false;
					this.$nextTick(() => {
						this.getCircleNoticeList();
						this.getActivityNoticeList();
						this.getSystemNoticeList();
					})
				}
			},
		},
		methods: {
			// 获取圈子通知列表
			getCircleNoticeList() {
				this.$Route('get-private-data').getCircleNoticeList().then((res) => {
					this.noticeList = res.data;
					this.dataLoaded = true;
					this.$emit('refreshState', false) //重置刷新状态
				}).catch((err) => {
					this.dataLoaded = true;
					this.$emit('refreshState', false) //重置刷新状态
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 获取活动通知列表
			getActivityNoticeList() {
				this.$Route('get-private-data', true).getActivityNoticeList().then((res) => {
					this.activityNoticeList = res.data;
					// 统计未读消息数量
					this.activityNoticeCount = this.activityNoticeList.filter(item => !item.user_read_status_array
						.includes(this.userInfo._id)).length;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 获取系统通知列表
			getSystemNoticeList() {
				this.$Route('get-private-data', true).getSystemNoticeList().then((res) => {
					this.systemNoticeList = res.data;
					// 统计未读消息数量
					this.systemNoticeCount = this.systemNoticeList.filter(item => item.user_read_status == 0)
						.length;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			// 跳转活动消息详情时监听
			navigateToActivityNoticeDetail(item) {
				const that = this;
				uni.navigateTo({
					url: `/pages/detail/messageDetail?data=${encodeURIComponent(JSON.stringify(item))}`,
					events: {
						refresh: function(data) {
							that.getActivityNoticeList();
						}
					}
				})
			},
			// 通知类型切换
			noticeTypeClick(val) {
				this.noticeType = val;
				if (this.isClickSystemNotice) {
					this.getSystemNoticeList();
				}
				setTimeout(() => {
					if (val === 2) {
						this.updateSystemNoticeReadStatus();
					}
				}, 500);
			},
			// 更新所有系统通知为已读状态
			updateSystemNoticeReadStatus() {
				this.isClickSystemNotice = true;
				this.$Route('update-private-data', true).updateSystemNoticeReadStatus().then().catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
				});
			}
		}
	}
</script>
<style lang="scss">
	.centered {
		left: 50%;
		transform: translate(-50%, 0%);
	}

	.num-box {
		font-size: 20rpx;
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #fd3613f2;
		color: #ffffff;
		position: absolute;
		right: -6rpx;
		top: -6rpx;
	}

	// 消息通知样式

	.wh-90 {
		width: 90rpx;
		height: 90rpx;
	}

	.line-box {
		width: 4rpx;
		background: #dcdcdc;
	}

	.text-box {
		padding: 7rpx 0;
	}

	.activity-box {
		width: 110rpx;
		height: 110rpx;
		background: #ebfdea;
	}

	.circle-box {
		width: 110rpx;
		height: 110rpx;
		background: #eafbfd;
	}

	.system-box {
		width: 110rpx;
		height: 110rpx;
		background: #fff9ea;
	}

	// 活动消息样式
	.message-empty-box {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.message-empty-image {
		width: 200rpx;
		height: 200rpx;
	}

	.message-uesr-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.activity-message-avatar {
		width: 65rpx;
		height: 65rpx;
		border-radius: 50%;
	}

	.activity-message-image {
		width: 100%;
		height: 300rpx;
	}

	.activity-message-title {
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.avatar-box-selected {
		// background动画
		transition: background 0.5s ease-in-out;
	}
</style>